<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css"> 
  <title>我的博客页面</title>
</head>

<body>
  <header>
    <h1>个人博客</h1>
  </header>
  <main>
    <article>
      <h2>第一篇博客文章</h2>
      <span class="article-tag">技术分享</span> <!-- 新增分类标签 -->
      <span class="read-count">阅读量：100</span> <!-- 新增阅读量 -->
      <p>这里是博客文章的内容，讲述一些有趣的事儿...</p>
      <!-- 打开 src/index.html，在每篇文章的 <p> 标签后添加以下内容 -->
<div class="comments-section">
  <h3>评论区</h3>
  
  <!-- 评论输入框 -->
  <div class="comment-form">
    <textarea placeholder="写下你的评论..."></textarea>
    <button onclick="submitComment(this)">提交评论</button>
  </div>
  
  <!-- 评论列表（初始为空，通过 JS 动态添加） -->
  <div class="comments-list"></div>
</div>
    </article>
    <article>
      <h2>第二篇博客文章</h2>
      <span class="article-tag">生活感悟</span> 
      <span class="read-count">阅读量：80</span> 
      <p>这是关于生活里一些小思考的内容...</p>
      <!-- 打开 src/index.html，在每篇文章的 <p> 标签后添加以下内容 -->
<div class="comments-section">
  <h3>评论区</h3>
  <!-- 在评论区的 h3 标签后添加排序按钮 -->
<div class="comment-actions">
  <button onclick="sortComments(this.closest('.comments-section').querySelector('.comments-list'))">
    按时间排序
  </button>
</div>
  <!-- 评论输入框 -->
  <div class="comment-form">
    <textarea placeholder="写下你的评论..."></textarea>
    <button onclick="submitComment(this)">提交评论</button>
  </div>
  
  <!-- 评论列表（初始为空，通过 JS 动态添加） -->
  <div class="comments-list"></div>
</div>
    </article>
  </main>
  <script src="script.js"></script> 
</body>

</html>